<template>
  <div class='main'>
    <el-row>
      <el-col :span='16'>
        <ol>
          <li>
            <router-link to='./tableSpan'>表格合并</router-link>
          </li>
          <li>
            <router-link to='./vuex'>vuex的使用</router-link>
          </li>
          <li>
            <router-link to='./home'>home</router-link>
          </li>
          <li>
            <router-link to='./remote'>远程搜索</router-link>
          </li>
          <li>
            <router-link to='./tree'>tree</router-link>
          </li>
          <li>
            <router-link to='./tree2'>tree2</router-link>
          </li>
          <li>
            <router-link :to="{name:'tableWidth'}">表格宽度自适应</router-link>
          </li>
          <li>
            <router-link to='./watch'>监听器watch</router-link>
          </li>
          <li>
            <router-link to='./computed'>计算属性</router-link>
          </li>
          <li>
            <router-link to='./case'>首字母大写</router-link>
          </li>
          <li>
            <router-link to='./music'>音乐播放器</router-link>
          </li>
          <li>
            <router-link :to="{name:'user',params:{id:1}}">用户1</router-link>
            &nbsp;&nbsp;
            <router-link :to="{name:'user',params:{id:2}}">用户2</router-link>
            &nbsp;&nbsp;
            <router-link :to="{name:'user_page',query:{id:3,title:'foo'}}">用户页面</router-link>
          </li>
          <li>
            <router-link :to="{name:'sass'}">sass的使用</router-link>
          </li>
          <li>
            <router-link :to="{name:'form'}">表单 自定义校验和正则</router-link>
          </li>
          <li>
            <router-link :to="{name:'options'}">下拉框 设置disabled属性</router-link>
          </li>
          <li>
            <router-link :to="{name:'options2'}">下拉框 创建副本数组</router-link>
          </li>
          <li>
            <router-link :to="{name:'formWidth2'}">表单宽度</router-link>
          </li>
          <li>
            <router-link :to="{name:'watchOptions'}">监听</router-link>
          </li>
          <li>
            <router-link :to="{name:'table'}">表格 table</router-link>
          </li>
          <li>
            <router-link :to="{name:'refs'}">通过refs自动获取焦点</router-link>
          </li>
          <li>
            <router-link :to="{name:'test'}">test</router-link>
          </li>
          <li>
            <router-link :to="{name:'nextTicks'}">nextTicks</router-link>
          </li>
          <li>
            <router-link :to="{name:'addProperty'}">动态添加响应式属性</router-link>
          </li>
          <li>
            <router-link :to="{name:'mock'}">mock模拟数据</router-link>
          </li>
          <li>
            <router-link :to="{name:'A'}">A</router-link>
          </li>
          <li>
            <router-link :to="{name:'b'}">B</router-link>
          </li>
          <li>
            <router-link :to="{name:'C'}">C</router-link>
          </li>
          <li>
            <router-link :to="{name:'全局组件'}">全局组件的使用</router-link>
          </li>
          <li>
            <router-link :to="{name:'vuexCount'}">vuex加减器</router-link>
          </li>
          <li>
            <router-link :to="{name:'cookies'}">cookies</router-link>
          </li>
          <li>
            <router-link :to="{name:'downLoadFile'}">上传下载文件</router-link>
          </li>
          <li>
            <router-link :to="{name:'signCanvas'}">手写签名</router-link>
          </li>
          <li>
            <router-link :to="{name:'directives'}">自定义指令</router-link>
          </li>
          <li>
            <router-link :to="{name:'echarts'}">echarts</router-link>
          </li>
          <li>
            <router-link :to="{name:'amap'}">高德地图</router-link>
          </li>
          <li>
            <router-link :to="{name:'richText-1'}">富文本-editor</router-link>
          </li>
          <li>
            <router-link :to="{name:'richText-2'}">富文本-wangeditor</router-link>
          </li>
          <li>
            <router-link :to="{name:'richText-3'}">富文本-quill</router-link>
          </li>
          <li>
            <router-link :to="{name:'select'}">下拉多选</router-link>
          </li>
          <li>
            <router-link :to="{name:'treeSelect'}">treeSelect</router-link>
          </li>
          <li>
            <router-link :to="{name:'binding'}">双向绑定</router-link>
          </li>
          <li>
            <router-link :to="{name:'myTreeTransfer'}">穿梭框</router-link>
          </li>
          <li>
            <router-link :to="{name:'test2'}">test2</router-link>
          </li>
          <li>
            <router-link :to="{name:'filters'}">filters</router-link>
          </li>
          <li>
            <router-link :to="{name:'keepAlive'}">keep-alive和slot</router-link>
          </li>
          <li>
            <router-link :to="{name:'myDirective'}">自定义指令</router-link>
          </li>
          <li>
            <router-link :to="{name:'three'}">three.js</router-link>
          </li>
          <li>
            <router-link :to="{name:'myCallBack'}">回调</router-link>
          </li>
          <li>
            <router-link :to="{name:'map2'}">地图2</router-link>
          </li>
          <li>
            <router-link :to="{name:'map3'}">地图3</router-link>
          </li>
          <li>
            <router-link :to="{name:'chart'}">图表-柱状图</router-link>
          </li>
          <li>
            <router-link :to="{name:'chart2'}">图表-散点气泡</router-link>
          </li>
          <li>
            <router-link :to="{name:'chart3'}">图表-堆叠分散柱状图</router-link>
          </li>
          <li>
            <router-link :to="{name:'chart4'}">图表-散点</router-link>
          </li>
          <li>
            <router-link :to="{name:'map-position'}">地图-坐标定位</router-link>
          </li>
          <li>
            <router-link :to="{name:'myProgress'}">进度条</router-link>
          </li>
          <li>
            <router-link :to="{name:'amapSvg'}">svg</router-link>
          </li>
          <li>
            <router-link :to="{name:'bug'}">bug</router-link>
          </li>
          <li>
            <router-link :to="{name:'fileSpl'}">文件分片</router-link>
          </li>
          <li>
            <router-link :to="{name:'checkbox-filter'}">复选框选中</router-link>
          </li>
          <li>
            <router-link :to="{name:'myParent'}">组件通讯</router-link>
          </li>
          <li>
            <router-link :to="{name:'myTree100'}">树型搜索框</router-link>
          </li>
          <li>
            <router-link :to="{name:'computedAndDirectives'}">computed和指令</router-link>
          </li>
          <li>
            <router-link :to="{name:'myInputDemo'}">demo</router-link>
          </li>
          <li>
            <router-link :to="{name:'testAA'}">testAA</router-link>
          </li>
          <li>
            <router-link :to="{name:'form10'}">动态表单校验</router-link>
          </li>
          <li>
            <router-link :to="{name:'pageCacheIndex'}">pageCache</router-link>
          </li>
          <li>
            <router-link :to="{name:'myDialog'}">myDialog</router-link>
          </li>
          <li>
            <router-link :to="{name:'mySelect'}">mySelect</router-link>
          </li>
          <li>
            <router-link :to="{name:'tableOption'}">tableOption</router-link>
          </li>
          <li>
            <router-link :to="{name:'amap_demo'}">amap_demo</router-link>
          </li>
          <li>
            <router-link :to="{name:'layout'}">layout</router-link>
          </li>
          <li>
            <router-link :to="{name:'map-test'}">map-test</router-link>
          </li>
          <li>
            <router-link :to="{name:'month'}">Element月份高亮</router-link>
          </li>
          <li>
            <router-link :to="{name:'upload'}">upload</router-link>
          </li>
          <li>
            <router-link :to="{name:'dealEventBus'}">dealEventBus</router-link>
          </li>
          <li>
            <router-link :to="{name:'vTreeSelect'}">vTreeSelect</router-link>
          </li>
          <li>
            <router-link :to="{name:'iframe'}">iframe</router-link>
          </li>
          <li>
            <router-link :to="{name:'tableEdit'}">tableEdit</router-link>
          </li>
          <li>
            <router-link :to="{name:'debounce'}">debounce</router-link>
          </li>
        </ol>
      </el-col>
      <el-col :span='8'>
        <div>content</div>
      </el-col>

    </el-row>
  </div>
</template>
<script>
export default {}
</script>
<style scoped>

/*.main {*/
/*  background-image: url('./img.png');*/
/*  background-size: cover;*/
/*  !*object-fit: cover;*!*/
/*  background-repeat: no-repeat;*/
/*  opacity: 0.25;*/
/*}*/

a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

li {
  padding: 5px;
  list-style: none;
  border: 1px solid #000;
  width: 210px;
  float: left;
  margin: 2px 5px;
  display: block;
  white-space: nowrap;
}
</style>
